.top-nav{width:100%;height:0.51rem;display:flex;display:-webkit-flex;align-items:center;
-webkit-align-items:center;justify-content:center;-webkit-justify-content:center;}
.top-nav ul{width:1.67rem;height:0.31rem;display:flex;display:-webkit-flex;align-items:center;cursor:pointer;
-webkit-align-items:center;justify-content:center;-webkit-justify-content:center;position:absolute;top:0.2rem;z-index:2;}
.top-nav ul.typhoon, .top-nav ul.radar{background:url('../../../images/home/index/bt.png') no-repeat;
background-size:100%;background-position:center;}
.top-nav ul.typhoon{left:12%;}
.top-nav ul.radar{left:22%;}
.top-nav ul.sate{right:22%;}
.top-nav ul.cloud{right:12%;}
.top-nav ul.typhoon.active, .top-nav ul.radar.active{background:url('../../../images/home/index/bt-h.png') no-repeat;
background-size:100%;background-position:center;}
.top-nav ul.sate, .top-nav ul.cloud{background:url('../../../images/home/index/bt-right.png') no-repeat;
background-size:100%;background-position:center;position:absolute;z-index:1;}
.top-nav ul.sate.active, .top-nav ul.cloud.active{background:url('../../../images/home/index/bt-right-h.png') no-repeat;
background-size:100%;background-position:center;}
.top-nav ul li:nth-child(1){width:0.308rem;height:0.308rem;}
.top-nav ul li:nth-child(2){font-size:0.15rem;color:#729E9E;margin-left:0.08rem;}
.top-nav ul.active li:nth-child(2){color:#45FEE0;}

.top-nav ul.typhoon li:nth-child(1){width:0.27rem;height:0.27rem;background:url('../../../images/home/index/typhoon.png') no-repeat;
background-size:100%;background-position:center;}
.top-nav ul.typhoon.active li:nth-child(1){width:0.27rem;height:0.27rem;background:url('../../../images/home/index/typhoon-h.png') no-repeat;
background-size:100%;background-position:center;}
.top-nav ul.radar li:nth-child(1){background:url('../../../images/home/index/radar.png') no-repeat;background-size:100%;
background-position:center;margin-top:-4px;}
.top-nav ul.radar.active li:nth-child(1){background:url('../../../images/home/index/radar-h.png') no-repeat;background-size:100%;
background-position:center;margin-top:-4px;}
.top-nav ul.sate li:nth-child(1){background:url('../../../images/home/index/sate.png') no-repeat;background-size:100%;
background-position:center;margin-top:-4px;}
.top-nav ul.sate.active li:nth-child(1){background:url('../../../images/home/index/sate-h.png') no-repeat;background-size:100%;
background-position:center;margin-top:-4px;}
.top-nav ul.cloud li:nth-child(1){background:url('../../../images/home/index/cloud.png') no-repeat;background-size:100%;
background-position:center;margin-top:-4px;}
.top-nav ul.cloud.active li:nth-child(1){background:url('../../../images/home/index/cloud-h.png') no-repeat;background-size:100%;
background-position:center;margin-top:-4px;}

.top-nav .title{width:9.5rem;height:0.55rem;display:flex;display:-webkit-flex;align-items:center;
-webkit-align-items:center;justify-content:center;-webkit-justify-content:center;background:
url('../../../images/home/index/header.png') no-repeat;background-size:100%;background-position:center;
position:absolute;left:15.7%;top:-5px;}
.top-nav .title .text{font-size:0.25rem;font-weight:400;color: #E4FDFF;background-clip:text;
background:linear-gradient(0deg, #12D5F1 0.68359375%, #C2FFFF 100%);-webkit-background-clip:text;
-webkit-text-fill-color:transparent;}